<template>
  <div class="app-container">
    <div class="container">
      <!-- 输入款 -->
      <div class="inp">
        <input type="text" placeholder="chokcoco" />
      </div>
      <!-- 键盘 -->
      <div class="pan">
        <div class="left_contianer">
          <ul class="list">
            <li class="item" code="Escape">Esc</li>
            <li class="item none" code="Escape"></li>
            <li class="item" code="F1">F1</li>
            <li class="item" code="F2">F2</li>
            <li class="item" code="F3">F3</li>
            <li class="item" code="F4">F4</li>
            <li class="item none small"></li>
            <li class="item" code="F5">F5</li>
            <li class="item" code="F6">F6</li>
            <li class="item" code="F7">F7</li>
            <li class="item" code="F8">F8</li>
            <li class="item none small"></li>
            <li class="item" code="F9">F9</li>
            <li class="item" code="F10">F10</li>
            <li class="item" code="F11">F11</li>
            <li class="item" code="F12">F12</li>
          </ul>
          <ul class="list">
            <li class="item db" code="Backquote">
              <div>~</div>
              <div>`</div>
            </li>
            <li class="item db" code="Digit1">
              <div>!</div>
              <div>1</div>
            </li>
            <li class="item db" code="Digit2">
              <div>@</div>
              <div>2</div>
            </li>
            <li class="item db" code="Digit3">
              <div>#</div>
              <div>3</div>
            </li>
            <li class="item db" code="Digit4">
              <div>$</div>
              <div>4</div>
            </li>
            <li class="item db" code="Digit5">
              <div>%</div>
              <div>5</div>
            </li>
            <li class="item db" code="Digit6">
              <div>^</div>
              <div>6</div>
            </li>
            <li class="item db" code="Digit7">
              <div>&</div>
              <div>7</div>
            </li>
            <li class="item db" code="Digit8">
              <div>*</div>
              <div>8</div>
            </li>
            <li class="item db" code="Digit9">
              <div>(</div>
              <div>9</div>
            </li>
            <li class="item db" code="Digit0">
              <div>)</div>
              <div>0</div>
            </li>
            <li class="item db" code="Minus">
              <div>一</div>
              <div>-</div>
            </li>
            <li class="item db" code="Equal">
              <div>+</div>
              <div>=</div>
            </li>
            <li class="item last" code="Backspace">←</li>
          </ul>
          <ul class="list">
            <li class="item" code="Tab">Tab=</li>
            <li class="item" code="KeyQ">Q</li>
            <li class="item" code="KeyW">W</li>
            <li class="item" code="KeyE">E</li>
            <li class="item" code="KeyR">R</li>
            <li class="item" code="KeyT">T</li>
            <li class="item" code="KeyY">Y</li>
            <li class="item" code="KeyU">U</li>
            <li class="item" code="KeyI">I</li>
            <li class="item" code="KeyO">O</li>
            <li class="item" code="KeyP">P</li>
            <li class="item db" code="BracketLeft">
              <div>{</div>
              <div>[</div>
            </li>
            <li class="item db" code="BracketRight">
              <div>}</div>
              <div>]</div>
            </li>
            <li class="item last" code="Backslash">
              <div>|</div>
              <div>\</div>
            </li>
          </ul>
          <ul class="list">
            <li class="item" code="CapsLock">Caps Lock</li>
            <li class="item" code="KeyA">A</li>
            <li class="item" code="KeyS">S</li>
            <li class="item" code="KeyD">D</li>
            <li class="item" code="KeyF">F</li>
            <li class="item" code="KeyG">G</li>
            <li class="item" code="KeyH">H</li>
            <li class="item" code="KeyJ">J</li>
            <li class="item" code="KeyK">K</li>
            <li class="item" code="KeyL">L</li>
            <li class="item db" code="Semicolon">
              <div>:</div>
              <div>;</div>
            </li>
            <li class="item db" code="Quote">
              <div>"</div>
              <div>'</div>
            </li>
            <li class="item last" code="Enter">Enter</li>
          </ul>
          <ul class="list">
            <li class="item last" code="ShiftLeft">↑Shift</li>
            <li class="item" code="KeyZ">Z</li>
            <li class="item" code="KeyX">X</li>
            <li class="item" code="KeyC">C</li>
            <li class="item" code="KeyV">V</li>
            <li class="item" code="KeyB">B</li>
            <li class="item" code="KeyN">N</li>
            <li class="item" code="KeyM">M</li>
            <li class="item db" code="Comma">
              <div>{{ keyboardlt }}</div>
              <div>,</div>
            </li>
            <li class="item db" code="Period">
              <div>{{ keyboardgt }}</div>
              <div>.</div>
            </li>
            <li class="item db" code="Slash">
              <div>?</div>
              <div>/</div>
            </li>
            <li class="item last" code="ShiftRight">↑Shift</li>
          </ul>
          <ul class="list">
            <li class="item" code="ControlLeft">Ctrl</li>
            <li class="item" code="MetaLeft">Win</li>
            <li class="item" code="AltLeft">Alt</li>
            <li class="item last" code="Space"></li>
            <li class="item" code="AltRight">Alt</li>
            <li class="item" code="MetaRight">Win</li>
            <li class="item" code="ContextMenu">Menu</li>
            <li class="item" code="ControlRight">Ctrl</li>
          </ul>
        </div>
        <div class="middle_contianer">
          <ul class="list">
            <li class="item db">
              <div>Prtsc</div>
              <div>Sysrq</div>
            </li>
            <li class="item db" code="ScrollLock">
              <div>Scroll</div>
              <div>Look</div>
            </li>
            <li class="item db" code="Pause">
              <div>Pause</div>
              <div>Break</div>
            </li>
          </ul>
          <ul class="list">
            <li class="item" code="Insert">Insert</li>
            <li class="item" code="Home">Home</li>
            <li class="item db" code="PageUp">
              <div>Page</div>
              <div>Up</div>
            </li>
          </ul>
          <ul class="list">
            <li class="item" code="Delete">Delete</li>
            <li class="item" code="End">End</li>
            <li class="item db" code="PageDown">
              <div>Page</div>
              <div>Down</div>
            </li>
          </ul>
          <ul class="list">
            <li class="item none"></li>
          </ul>
          <ul class="list">
            <li class="item" code="ArrowUp">^</li>
          </ul>
          <ul class="list">
            <li class="item" code="ArrowLeft">{{ keyboardlt }}</li>
            <li class="item" code="ArrowDown">v</li>
            <li class="item" code="ArrowRight">{{ keyboardgt }}</li>
          </ul>
        </div>
        <div class="right_contianer">
          <ul class="list">
            <li class="item none"></li>
          </ul>
          <ul class="list">
            <li class="item db" code="NumLock">
              <div>Num</div>
              <div>Lock</div>
            </li>
            <li class="item" code="NumpadDivide">/</li>
            <li class="item" code="NumpadMultiply">*</li>
            <li class="item" code="NumpadSubtract">-</li>
          </ul>
          <div class="wraper">
            <div class="lt">
              <ul class="list">
                <li class="item db" code="Numpad7">
                  <div>7</div>
                  <div>Home</div>
                </li>
                <li class="item db" code="Numpad8">
                  <div>8</div>
                  <div>^</div>
                </li>
                <li class="item db" code="Numpad9">
                  <div>9</div>
                  <div>PgUp</div>
                </li>
              </ul>
              <ul class="list">
                <li class="item db" code="Numpad4">
                  <div>4</div>
                  <div>{{ keyboardlt }}</div>
                </li>
                <li class="item" code="Numpad5">5</li>
                <li class="item db" code="Numpad6">
                  <div>6</div>
                  <div>{{ keyboardgt }}</div>
                </li>
              </ul>
              <ul class="list">
                <li class="item db" code="Numpad1">
                  <div>1</div>
                  <div>End</div>
                </li>
                <li class="item db" code="Numpad2">
                  <div>2</div>
                  <div>v</div>
                </li>
                <li class="item db" code="Numpad3">
                  <div>3</div>
                  <div>PgDn</div>
                </li>
              </ul>
              <ul class="list">
                <li class="item db last" code="Numpad0">
                  <div>0</div>
                  <div>INs</div>
                </li>
                <li class="item db" code="NumpadDecimal">
                  <div>.</div>
                  <div>Del</div>
                </li>
              </ul>
            </div>
            <div class="rt">
              <div class="item last" code="NumpadAdd">+</div>
              <div class="item last" code="NumpadEnter">Enter</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'keyboardresult',
  data () {
    return {
      // 特殊符号
      keyboardlt: '<',
      keyboardgt: '<'
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      const ELEMENT_LIST = {}
      const eles = document.querySelectorAll('.item[code]')
      console.log('else', eles)
      eles.forEach(item => {
        ELEMENT_LIST[item.getAttribute('code')] = item
      })

      document.querySelector('input').addEventListener('keydown', function (e) {
        console.log(e)
        // 防止没有code报错
        if (!e.code) return
        if (!ELEMENT_LIST[e.code].className.includes('active')) {
          ELEMENT_LIST[e.code].className = `${
            ELEMENT_LIST[e.code].className
          } active`
        }
      })

      document.addEventListener('keyup', function (e) {
        // 防止没有code报错
        if (!e.code) return
        ELEMENT_LIST[e.code].className = ELEMENT_LIST[e.code].className.replace(
          'active',
          ''
        )
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .container {
    margin: auto;
    .inp {
      width: 70%;
      margin: 0 auto;
      input {
        height: 50px;
        width: 100%;
        outline: none;
        padding: 0 15px;
        border-radius: 5px;
        box-shadow: 2px 0 8px #aaa inset;
        border: none;

        &::placeholder {
          font-size: 20px;
          font-weight: bold;
          text-align: center;
          color: #bdb2b2;
        }
      }
    }
    .pan {
      width: 100%;
      margin: 15px auto;
      display: flex;
      justify-content: space-between;
      background-color: #ebecf1;
      padding: 20px 15px;
      box-shadow: 2px 0 8px #aaa inset;
      border-radius: 15px;
      ul {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      .list {
        display: flex;
        flex-wrap: nowrap;
      }
      .item {
        box-sizing: border-box;
        min-width: 2.5vw;
        height: 2.5vw;
        padding: 5px;
        border-radius: 5px;
        color: #5c5757;
        margin-right: 1vw;
        text-align: center;
        box-shadow: -2px -2px 2px #fff, 3px 3px 5px gray;
        font-size: 12px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        margin-bottom: 10px;
        .none {
          box-shadow: none;
        }
        .small {
          width: 2vw;
        }
        .db {
          padding: 2px 5px;
        }
        .last {
          flex: 1;
        }
        .active {
          background-color: #5cbb7a;
          color: #fff;
        }
        .left_contianer {
          width: 62%;
          margin-right: 10px;
        }
        .middle_contianer {
          .list {
            justify-content: space-around;
            .item {
              min-width: 3vw;
            }
          }
        }
        .right_contianer {
          .list {
            justify-content: space-around;
          }
          .wraper {
            display: flex;
            .rt {
              display: flex;
              flex-direction: column;
            }
          }
        }
      }
    }
  }
}
</style>
